<template>
  <div class="app-container rule" style="overflow: scroll;">
    <div v-loading="$store.state.app.loading" class="table-main fixed">
      <div class="table-top-button">
        <el-button icon="el-icon-plus" type="primary" size="mini" @click="handleOpenModal(null)">新增</el-button>
      </div>
      <el-table
        row-key="menu_id"
        highlight-current-row
        :data="listData"
        :border="true"
        :stripe="true"
        :empty-text="$store.state.app.loading ? '正在加载数据' : null"
      >
        <el-table-column prop="menu_name" label="菜单名称" width="180" />
        <el-table-column prop="uri" label="菜单路径" />
        <el-table-column prop="icon" label="图标编码" width="300" />
        <el-table-column prop="menu_id" label="ID" width="70" />
        <el-table-column prop="is_hide" label="是否隐藏" width="80">
          <template slot-scope="item">
            <el-tag v-if="item.row.is_hide === 1" type="success" size="small">是</el-tag>
            <el-tag v-else type="info" size="small">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="当前状态" width="80">
          <template slot-scope="item">
            <el-tag v-if="item.row.status === 1" type="success" size="small">正常</el-tag>
            <el-tag v-else type="danger" size="small">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="160" />
        <el-table-column prop="action" label="操作" width="130">
          <template slot-scope="item">
            <div class="button-group">
              <el-button type="text" size="mini" @click="handleOpenModal(item.row)">新增
              </el-button>
              <el-button type="text" size="mini" @click="handleOpenModal(item.row, true)">编辑
              </el-button>
              <el-button type="text" size="mini" @click="handleRowDelete(item.row)">删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 数据编辑弹窗 -->
    <box-save
      v-if="showModal"
      :is-update="isUpdate"
      :item-data="itemData"
      :option="{ listData: listData, ruleTree: ruleTree }"
      @on-cancel-modal="acceptCancelModal"
    />
  </div>
</template>

<script>
import boxSave from './components/save'
import { destroy, info, lists } from '@/api/menu'

export default {
  components: { 'box-save': boxSave },
  data: function() {
    return {
      listData: [],
      ruleTree: [],
      itemData: null,
      isUpdate: false,
      showModal: false,
      searchParams: {
        module: 1,
        format: 'tree'
      }
    }
  },
  mounted: function() {
    // 初始化方法
    this.initialize()
  },
  methods: {
    // 初始化数据列表
    initialize: function() {
      // 获取用户列表
      this.$store.commit('app/SET_LOADING', true)
      lists(this.searchParams).then(res => {
        this.listData = res.data
        this.$nextTick(function() {
          this.$store.commit('app/SET_LOADING', false)
        })
      })
    },
    // 打开数据编辑窗口
    handleOpenModal: function(itemData, isUpdate = false) {
      this.itemData = itemData
      this.isUpdate = isUpdate
      this.$store.commit('app/SET_LOADING', true)
      info(itemData ? itemData['menu_id'] : null, function(res) {
        this.ruleTree = res[0]
        if (this.isUpdate) {
          this.itemData = res[1]
        }
        this.showModal = true
        this.$store.commit('app/SET_LOADING', false)
      }.bind(this))
    },
    // 关闭数据编辑窗口
    acceptCancelModal: function(refresh = false) {
      if (refresh === true) {
        this.initialize()
      }
      this.showModal = false
    },
    // 删除列表指定数据
    handleRowDelete: function(row) {
      this.$confirm('该操作将彻底删除该数据切无法恢复，确定要继续吗?', '提示', {
        distinguishCancelAndClose: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '请稍等...'
            destroy(row.menu_id).then(function() {
              done()
              this.initialize()
              instance.confirmButtonLoading = false
              instance.confirmButtonText = '确定'
            }.bind(this)).catch(function() {
              instance.confirmButtonLoading = false
              instance.confirmButtonText = '确定'
            })
          } else {
            done()
            instance.confirmButtonLoading = false
            instance.confirmButtonText = '确定'
          }
        }
      })
    }
  }
}
</script>
